import React from 'react';
import { t } from 'i18next';

const TopBg: React.FC = () => {
  const list = [
    {
      name: t('home.OneWallet'),
      to: '',
    },
    {
      name: t('home.startgame'),
      to: '',
    },
    {
      name: t('home.obtained'),
      to: '',
    },
    {
      name: t('home.safe'),
      to: '',
    },
  ];

  return (
    <div className="w-full flex mt-[40px] md:mt-[80px] flex-col md:flex-row justify-center md:justify-between  items-center md:items-start ">
      <div className="hidden md:block text-center">
        <div className=" text-[#fff] text-[88px] leading-[80px]">
          <div> {t('home.FAQ')}</div>
        </div>
        <div className="w-[278px] h-[278px] md:w-[340px] md:h-[340px] object-contain">
          <img src="./home/twoCoine.png" />
        </div>
      </div>
      {/* 手机模式 */}
      <div className="md:hidden w-full relative h-[220px]">
        <div className=" text-[#fff] text-[32px] leading-[80px]">
          <div> {t('home.FAQ')}</div>
        </div>
        <div className="w-[170px] h-[170px] object-contain absolute top-6 right-10">
          <img src="./home/twoCoine.png" />
        </div>
      </div>
      <div className="w-[90vw] md:w-[42vw]">
        {list.map((item, index) => (
          <div
            key={index}
            className={`mb-[16px] p-[10px] md:p-[20px] rounded-[50px] border border-[#333] 
              transition-all duration-300 hover:border-white cursor-pointer flex
               justify-between items-center bg-[#1A1A1A] `}
          >
            <span className="text-white text-[14px]">{item.name}</span>
            <div className="w-[24px] h-[24px]  object-contain">
              <img src="./home/right.png" />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default TopBg;
